<template>
  <el-card>
    <el-table border :data="skuList" v-loading="loading">
      <el-table-column type="index" label="序号" width="80px" align="center" />
      <el-table-column label="名称" prop="skuName" align="center" />
      <el-table-column label="描述" prop="skuDesc" align="center" />
      <el-table-column label="默认图片" align="center">
        <template v-slot="{row}">
          <el-image style="width: 100px; height: 100px" :src="row.skuDefaultImg" />
        </template>
      </el-table-column>
      <el-table-column label="重量(KG)" prop="weight" align="center" />
      <el-table-column label="价格(元)" prop="price" align="center" />
      <el-table-column label="操作" align="center" width="260px">
        <template v-slot="{row}">
          <el-tooltip v-if="row.isSale==0" class="box-item" effect="dark" content="上架" placement="top">
            <el-button :icon="Top" type="info" size="small" @click="toOnSale(row)"></el-button>
          </el-tooltip>
          <el-tooltip v-else class="box-item" effect="dark" content="下架" placement="top">
            <el-button :icon="Bottom" type="success" size="small" @click="toCancelSale(row)"></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="编辑" placement="top">
            <el-button :icon="Edit" type="primary" size="small"></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="查看" placement="top">
            <el-button :icon="InfoFilled" type="info" size="small" @click="toCheckSkuInfo(row.id)"></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
            <el-popconfirm title="确定要删除此条数据吗？" @confirm="toDelSkuInfo(row.id)">
              <template #reference>
                <el-button :icon="Delete" type="danger" size="small"></el-button>
              </template>
            </el-popconfirm>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination style="margin-top:10px" v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[7, 15, 20, 30]" :small="small" :disabled="disabled" :background="background" layout="prev, pager, next, jumper,->,sizes,total " :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <!-- 抽屉效果 -->
    <el-drawer v-model="drawer" title="I am the title" :direction="direction" size="45%" :before-close="handleClose">
      <el-row :gutter="10">
        <el-col :span="7">
          <h4>名称</h4>
        </el-col>
        <el-col :span="17">
          <p>{{skuInfo.skuName}}</p>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7">
          <h4>描述</h4>
        </el-col>
        <el-col :span="17">
          <p>{{skuInfo.skuDesc}}</p>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7">
          <h4>价格</h4>
        </el-col>
        <el-col :span="17">
          <p>{{skuInfo.price}}</p>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7">
          <h4>平台属性</h4>
        </el-col>
        <el-col :span="17">
          <el-tag v-for="skuAttrValue in skuInfo.skuAttrValueList" :key="skuAttrValue.id">{{skuAttrValue.attrName+'-'+skuAttrValue.valueName}}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7">
          <h4>销售属性</h4>
        </el-col>
        <el-col :span="17">
          <el-tag v-for="saleAttr in skuInfo.skuSaleAttrValueList" :key="saleAttr.id">{{saleAttr.saleAttrName+'-'+saleAttr.saleAttrValueName}}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7">
          <h4>商品图片</h4>
        </el-col>
        <el-col :span="17">
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
              <el-image :src="item.imgUrl" style="width:100%"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'Sku'
};
</script>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Top, Bottom, Delete, Edit, InfoFilled } from '@element-plus/icons-vue';
import { reqGetAllSkuList, reqSkuInfoOnSale, reqSkuInfoCancelSale, reqDeleteSkuInfo, reqGetOneSkuInfo } from '@/api/product/sku';
import { ElMessage } from 'element-plus';

const skuInfo = ref({});
const skuList = ref([]);
const currentPage = ref(1);
const pageSize = ref(7);
const total = ref(0);
const loading = ref(false);
const direction = ref('rtl');
const drawer = ref(false);
//1.根据页码获取skuList列表数据
const getAllSkuList = async () => {
  loading.value = true;
  const result = await reqGetAllSkuList(currentPage.value, pageSize.value);
  skuList.value = result.records;
  total.value = result.total;
  loading.value = false;
};

//2.页面挂载完毕之后要获取当前页面的数据
onMounted(() => {
  getAllSkuList();
});

//4.每页显示多少条触发的时候，也要重新渲染页面
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  currentPage.value = 1; //重置为1

  getAllSkuList();
};
//3.页码发生改变的时候 重新发送请求
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  getAllSkuList();
};
//4.实现skuInfo商品上架
const toOnSale = async row => {
  await reqSkuInfoOnSale(row.id);
  ElMessage.success('商品上架成功...');
  // getAllSkuList();
  row.isSale = 1 - row.isSale;
};
// 5.实现skuInfo商品下架
const toCancelSale = async row => {
  await reqSkuInfoCancelSale(row.id);
  ElMessage.success('商品下架成功');
  row.isSale = 1 - row.isSale;
};
//6.删除skuInfo
const toDelSkuInfo = async (id: number) => {
  await reqDeleteSkuInfo(id);
  ElMessage.success('删除sku商品成功');
  getAllSkuList();
};
//7.查看skuInfo一个对象信息
const toCheckSkuInfo = async (id: number) => {
  drawer.value = true;
  skuInfo.value = await reqGetOneSkuInfo(id);
};
</script>

<style>
</style>